<template>
    <div id="app" ref="editorRef"></div>
</template>
<script setup>
import { onUnmounted, onMounted, ref, toRaw,toRefs } from "vue";
import * as monaco from "monaco-editor";
// 解决下面控制台的提示You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker
import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
(self).MonacoEnvironment = {
    getWorker(_, label) {
        return new EditorWorker();
    },
};
const  props= defineProps(['ininitSQLit'])
const { ininitSQLit } = toRefs(props )
const editorRef = ref(null);
const inputEditor = ref();
onMounted(() => {
    const initValue = ininitSQLit.value;
    inputEditor.value = monaco.editor.create(editorRef.value, {
        value: initValue,
        language: "sql",
        theme: "vs-dark",
        readOnly:false,
        formatOnPaste: true,
        automaticLayout: true,
        fontSize: 15,
        minimap: {
            enabled: false,
        },
    });
});
onUnmounted(() => {
  if (inputEditor.value) {
    toRaw(inputEditor.value).dispose();
  }
});
</script>
  <style scoped>
  #app{
    min-height: 400px
  }
  </style>